Mr笔记

Appearance

S00-00 General-Cloudflare-Workers、Pages ​

[TOC]

Workers ​

概述 ​

什么是 Workers ​

Cloudflare Workers：是一个无服务器（Serverless）计算平台，它允许你在 Cloudflare 的全球网络边缘（Edge Network）运行代码。

想象一下：以前你的代码跑在上海或洛杉矶的一台 VPS 上（像个“宠物”，需要精心照料）；现在你的代码跑在 Cloudflare 遍布全球 300 多个城市的机房里（像“空气”，无处不在，随用随有）。

核心特点 ​

核心特点：

  1. 真正的“边缘”计算 (Edge Computing)
    • 传统的 VPS 或云服务器通常在某个固定的数据中心（如阿里云杭州）。如果用户在伦敦，访问就会慢。
    • Workers 的代码会自动部署到全世界。当伦敦用户访问时，代码就在伦敦的 Cloudflare 节点运行；北京用户访问时，可能就在香港或日本节点运行。代码永远在离用户最近的地方执行。
  2. 0 毫秒冷启动 (0ms Cold Start)
    • 这是它区别于 AWS Lambda 的最大技术优势。
    • ？AWS Lambda 使用“容器”技术？，启动慢（冷启动可能要几百毫秒）。
    • Cloudflare Workers 使用 Chrome 浏览器的 V8 Isolates 技术（隔离区），不是启动整个操作系统，而是只启动一个极其轻量的运行环境。这使得它几乎瞬间响应。
  3. 与 Pages 的关系 (和你正在做的项目有关)
    • 你目前使用的 Cloudflare Pages，其后端的 "Functions"（/functions 目录下的代码）本质上就是 Cloudflare Workers。
    • Cloudflare 为了方便前端开发者，把 Workers 集成到了 Pages 里，让你不用单独去配置 Workers 项目就能写后端逻辑。

应用场景 ​

应用场景：

由于它运行在请求到达你的源服务器 之前，或者完全独立运行，它非常适合做：

  • API 接口/后端：直接连接 D1 数据库，返回 JSON 数据（正是你 115 书签项目需要的）。
  • 中转代理 (Proxy)：比如解决跨域问题 (CORS)，或者隐藏你真实的 115 网盘 API Key。
  • 重定向与路由：根据用户国家跳转不同页面，或处理短链接。
  • 修改请求/响应：在网页返回给用户前，动态注入一段 HTML 或修改 Header。

基本使用 ​

基本使用：

Workers 使用标准的 Fetch API，这对前端开发者非常友好。这是一个最简单的“Hello World”：

js
export default {
  async fetch(request, env, ctx) {
    // 你的逻辑代码
    return new Response('Hello World! This runs on the Edge.', {
      headers: { 'content-type': 'text/plain' }
    })
  }
}

对比传统 VPS ​

特性Cloudflare Workers传统 VPS (如阿里云)
运维无 (只管写代码，不管系统、补丁)重 (需管理 Linux, 防火墙, 环境)
位置全球分布 (自动就近)单点 (固定机房)
计费按请求量 (有免费额度)按月/按时付费 (闲置也扣费)
状态无状态 (每次运行都是新的)有状态 (可以存文件到本地硬盘)
适用API, ？胶水逻辑？, 高并发轻量任务跑 Docker, 长期运行的后台进程, 复杂计算

结合 115 书签项目 ​

结合 115 书签项目：

在你之前的规划中：

  • Pages 托管前端 HTML/JS。
  • Workers (Pages Functions) 充当后端 API。
  • D1 存储书签数据。
  • R2 存储缩略图。

这正是 Workers 生态系统的典型用法：Worker 作为“大脑”，把 D1 (记忆) 和 R2 (仓库) 串联起来，快速响应前端请求。

Pages ​

概述 ​

什么是 Pages ​

Cloudflare Pages：是 Cloudflare 推出的一个面向前端和全栈开发者的部署平台（JAMstack 平台）。

简单来说，它不仅是一个类似 GitHub Pages 的“静态网站托管服务”，更是一个可以通过 Git 自动化构建、部署，并能运行后端代码（Serverless）的全栈开发平台。

以下是它的核心概念和关键特性：

核心定位 ​

核心定位：从静态到全栈：

  • 起步： 最初它主要用于托管静态网站（如 Vue, React, VitePress, Hexo 生成的博客或文档），直接对标 GitHub Pages 和 Netlify。
  • 进阶： 后来引入了 Pages Functions，允许你在项目中直接编写后端代码（API），这使得它不仅能存 HTML/CSS/JS，还能处理数据库读写、用户登录等动态逻辑。

核心特性 ​

核心特性：

  1. 极速的全球边缘网络 (The Edge)： 这是 Cloudflare Pages 最大的杀手锏。你部署的网站不是放在某一台服务器上，而是自动分发到 Cloudflare 遍布全球 330+ 个城市的边缘节点。

    • 效果： 全球各地的用户访问你的网站时，都是从距离他们最近的机房获取数据，速度极快（尤其是相比 GitHub Pages）。

  2. Git 集成与自动化 CI/CD：

    • 工作流： 你只需将代码推送到 GitHub 或 GitLab。
    • 自动化： Cloudflare Pages 会监听代码更新，自动拉取代码 -> 执行构建命令（如 npm run build） -> 将生成的静态文件发布上线。
    • 预览环境 (Preview Deployments)： 这是一个非常受开发者喜欢的功能。当你提交一个新的 Pull Request 时，Pages 会自动为这个分支生成一个临时的独立域名。你可以在合并代码前先预览效果，确认无误后再合并。

  3. Pages Functions 后端能力： 这是让它超越普通静态托管的关键。

    • 原理： 基于 Cloudflare Workers 技术。
    • 用法： 你只需在项目中创建一个 functions 目录，并在里面写 JavaScript/TypeScript 文件（例如 functions/api/hello.js）。
    • 结果： 部署时，这些文件会自动变成无服务器接口（API）。这意味着你不需要单独买服务器或配置 Nginx，就可以拥有一个带后端的完整应用（例如：连接 D1 数据库、R2 存储桶等）。

  4. 免费且大方： 对于个人开发者，它的免费套餐（Free Plan）非常慷慨：

    • 带宽： 无限制（无限流量）。
    • 请求数： 静态资源请求无限制。
    • 协作： 无限制的协作者数量。
    • 构建次数： 每月 500 次构建（通常足够个人使用）。

Cloudflare Pages vs. Cloudflare Workers ​

很多人容易混淆这两者，因为 Pages 的后端就是跑在 Workers 上的。

  • Cloudflare Workers: 主要是**“以代码为中心”**。适合写单纯的 API、网关、代理服务。虽然现在也能托管静态资源，但主要心智模型还是写代码。
  • Cloudflare Pages: 主要是**“以页面/文件为中心”**。适合做网站（博客、文档、Web App）。它自带构建系统（Build System），帮你把 Vue/React 源码编译成 HTML，这是 Workers 原生不具备的流程。

总结：它可以用来做什么？ ​

  1. 静态网站： 个人博客、文档站点（如 VitePress）、公司官网。
  2. 前端应用 (SPA)： React, Vue, Angular 开发的单页应用。
  3. 全栈应用： 结合 Pages Functions，开发需要后端 API 的应用（如：留言板、短链接生成器、或者你正在构思的 115 网盘书签工具）。

下一步建议 ​

由于你已经在使用 VitePress 和规划 115 网盘工具，Cloudflare Pages 是非常适合你的选择：

  • 对于 VitePress： 直接连接 GitHub 仓库，它会自动识别并构建。
  • 对于 115 工具： 利用 functions 目录编写后端 API 来操作 D1 数据库和 R2 存储，实现完全无服务器化部署。

你是否需要了解如何在 Cloudflare Pages 中具体配置 functions 来连接 D1 数据库？

什么是 Pages ​

如果说 Workers 是为了解决“后端逻辑”在边缘运行的问题，那么 Cloudflare Pages 就是为了解决“前端页面”在边缘托管和构建的问题。它主要对标 Vercel 和 Netlify，是托管 Vue、React 等前端项目的最佳方案。

核心工作流：自动化构建 ​

Pages 改变了传统“本地打包 -> 手动上传 -> 配置 Nginx”的繁琐流程，实现了现代化的 GitOps 工作流：

  1. Git 集成： 连接 GitHub/GitLab 仓库。
  2. 自动构建： 云端监听到代码提交后，自动运行 npm install 和 npm build。
  3. 全球分发： 构建生成的静态文件（HTML/CSS/JS）自动分发到全球 300+ 节点。
  4. 预览环境 (Preview Deployments)： 每个 Pull Request 都会自动部署一个临时的、独立的 URL（如 pr-123.project.pages.dev）供团队测试，合并后才会更新主环境。

Pages 与 Workers 的区别 ​

  • Workers：代码优先。 适合写 API、代理、复杂逻辑。虽然能返回 HTML，但不适合管理大量静态资源。
  • Pages：文件/资产优先。 专为托管静态网站设计，擅长处理文件存储和分发。

Pages Functions (全栈能力) ​

这是 Pages 的“杀手锏”。通过在项目根目录创建 functions 文件夹，开发者可以在 Pages 项目中直接编写后端逻辑。

  • 自动路由： functions 目录下的文件会自动部署为 Workers 并生成 API 路由。

    • functions/api/login.js -> 自动映射为 /api/login 接口。

  • Monorepo 优势： 前端（Vue）与后端（Functions）在同一个仓库中管理，共享环境变量和 D1/KV 绑定，无需跨域配置（因为同属一个域名）。

架构选型建议 ​

在迁移传统应用（如阿里云上的 Vue + Nginx）时，有两种架构模式可供选择：

架构 A：混合模式 ​

  • 前端： 托管在 Cloudflare Pages。
  • 后端： 独立的 Cloudflare Workers 项目。
  • 连接： 前端通过 HTTP 请求调用后端 URL。
  • 特点： 前后端完全解耦，适合独立开发团队。

架构 B：全栈 Pages 模式 (推荐) ​

  • 结构： 单个 GitHub 仓库 (Monorepo)。
  • 前端： Vue/React 代码。
  • 后端： functions/ 目录下的 API 代码。
  • 特点： 管理方便，共享资源绑定，无需维护两个项目，适合个人开发者和全栈应用。